<template>
  <div class="app-container">
    <el-row :gutter="20" class="row-con">
      <!--侧边工厂树数据-->
      <el-col :xs="10" :sm="7" :md="8" :lg="6" :xl="7">
        <el-card class="box-card card">
          <div class="head-container">
            <el-input
              v-model="filterText"
              clearable
              size="small"
              placeholder="输入名称搜索"
              prefix-icon="el-icon-search"
              class="filter-item"
            />
          </div>

          <el-tree
            class="filter-tree"
            ref="factoryTree"
            :data="treeData"
            :props="defaultProps"
            :filter-node-method="filterNode"
            :expand-on-click-node="false"
            :render-content="renderContent"
            @node-click="handleNodeClick"
            v-loading="treeLoading"
            :auto-expand-parent="true"
            :default-expand-all="true"
            node-key="id"
          >
          </el-tree>
        </el-card>
      </el-col>

      <el-col :xs="14" :sm="17" :md="16" :lg="18" :xl="17">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span class="details-title">{{ currentName }}</span>
            <!--<el-button style="float: right; padding: 3px 0" >操作按钮</el-button>-->
            <div style="float: right">
              <el-button
                v-if="crud.optShow.edit"
                v-permission="permission.edit"
                class="filter-item"
                size="mini"
                type="success"
                icon="el-icon-edit"
                @click="crud.toEdit(crud.data[0])"
                :disabled="!detailsData.id"
              >
                修改{{ currentName }}
              </el-button>

              <el-button
                v-if="crud.optShow.del"
                v-permission="permission.del"
                class="filter-item"
                type="danger"
                icon="el-icon-delete"
                size="mini"
                :loading="crud.delAllLoading"
                @click="toDelete(crud.data)"
                :disabled="!detailsData.id"
              >
                删除{{ currentName }}
              </el-button>
            </div>
          </div>
          <div class="text item">
            <el-descriptions
              v-loading="crud.loading"
              size="medium"
              style="font-weight: 700"
            >
              <el-descriptions-item :label="currentName + '编码'">{{
                detailsData.modelCode
              }}</el-descriptions-item>

              <el-descriptions-item :label="currentName + '名称'">{{
                detailsData.modelName
              }}</el-descriptions-item>

              <el-descriptions-item label="更新人">{{
                detailsData.updateBy
              }}</el-descriptions-item>

              <el-descriptions-item label="更新时间">{{
                detailsData.updateTime
              }}</el-descriptions-item>

              <el-descriptions-item :label="currentName + '描述'">{{
                detailsData.remark
              }}</el-descriptions-item>
            </el-descriptions>
          </div>
        </el-card>
        <!--表单渲染-->
        <el-card class="box-card" style="margin-top: 10px">
          <el-tabs
            :activeName="detailsData.modelType < 5 ? 'factoryList' : 'attrList'"
            class="list-tabs"
          >
            <el-tab-pane
              :label="chidrenName + '列表'"
              name="factoryList"
              v-if="detailsData.modelType < 5"
            >
              <childrenList
                ref="childrenList"
                :pid="detailsData.id"
                :modelType="detailsData.modelType"
                :getDetailsDataById="getDetailsDataById"
                :typeName="chidrenName"
                :initTree="initTree"
              ></childrenList>
            </el-tab-pane>

            <el-tab-pane label="属性列表" name="attrList">
              <attrList :pid="detailsData.id"></attrList>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
      <!--修改表单-->
      <eForm :inputName="types[detailsData.modelType]"></eForm>
    </el-row>
  </div>
</template>

<script>
import crudFactoryModel from "@/api/factory/factoryModel";
import CRUD, { presenter, header, form, crud } from "@crud/crud";
import rrOperation from "@crud/RR.operation";
import crudOperation from "@crud/CRUD.operation";
import udOperation from "@crud/UD.operation";
import pagination from "@crud/Pagination";
import eForm from "./form";
import childrenList from "./childrenList";
import attrList from "../../attribute";
const defaultForm = {
  id: null,
  modelCode: null,
  modelName: null,
  modelType: null,
  remark: null,
  pid: null,
  createBy: null,
  createTime: null,
  updateBy: null,
  updateTime: null,
};
export default {
  name: "FactoryDetails",
  components: {
    pagination,
    crudOperation,
    rrOperation,
    udOperation,
    eForm,
    childrenList,
    attrList,
  },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  cruds() {
    return CRUD({
      title: "建模",
      url: "api/factoryModel",
      idField: "id",
      sort: "id,desc",
      queryOnPresenterCreated: false,
      crudMethod: { ...crudFactoryModel },
    });
  },
  watch: {
    //搜索框
    filterText(val) {
      this.$refs.factoryTree.filter(val);
    },
  },
  computed: {
    currentName() {
      return this.types[this.detailsData.modelType];
    },
    chidrenName() {
      return this.types[this.detailsData.modelType * 1 + 1];
    },
  },
  data() {
    return {
      pid: null,
      //树数据
      treeData: [],
      //搜索框数据
      filterText: "",
      treeLoading: false,
      //当前点击节点
      treeNode: null,
      //树配置
      defaultProps: {
        children: "children",
        label: "label",
      },
      //权限
      permission: {
        add: ["admin", "factoryModel:add"],
        edit: ["admin", "factoryModel:edit"],
        del: ["admin", "factoryModel:del"],
      },
      //详情数据
      detailsData: defaultForm,
      types: {
        0: "工厂",
        1: "车间",
        2: "产线",
        3: "工段",
        4: "工位",
        5: "设备",
      },
      //树图标
      icons : [
        'el-icon-office-building',
        'el-icon-school',
        'el-icon-receiving',
        'el-icon-files',
        'el-icon-guide',
        'el-icon-cpu'
      ]
    };
  },
  methods: {
    //初始化树
    initTree(){
      this.treeLoading = true;
      crudFactoryModel.getTreeById({id:this.$route.params.id}).then(res => {
        this.treeLoading = false;
        this.treeData = res;
      });
    },
    //自定义树内容 添加图标
    renderContent(h, { node, data, store }){
      return (<span><i style="font-size: 10px;" class={this.icons[data.type]} ></i><span style="padding-left: 6px;">{node.label}</span></span>);
    },
    //搜索框过滤节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    //树点击事件
    handleNodeClick(data, node) {
      this.treeNode = node;
      this.getDetailsDataById(data.id);
    },
    //根据获取详情数据
    getDetailsDataById(id) {
      this.pid = id;

      this.crud.params.id = id;
      this.crud.toQuery();
    },
    //确认删除
    toDelete(data) {
      this.$confirm(
        "确认删除这个" + this.currentName + "吗?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          debugger
          let childrenListtotal = 0;
          if (this.$refs.childrenList) {
            childrenListtotal = this.$refs.childrenList.getPageTotal();
          }
          if (childrenListtotal > 0) {
            this.$confirm(
              "<strong>该建模下有其他模型</strong>, 是否继续?",
              "提示",
              {
                confirmButtonText: "取消",
                cancelButtonText: "确认删除",
                dangerouslyUseHTMLString: true,
                type: "warning",
              }
            ) .then(() => {})
              .catch(() => {
                this.crud.delAllLoading = true;
                this.crud.doDelete(data);
                this.crud.delAllLoading = false;
                if(data[0].modelType == '0'){
                  this.$router.replace({
                    path: "/factory/model",
                  });
                } else {
                  this.initTree();
                }
              });
          } else {
            this.crud.delAllLoading = true;
            this.crud.doDelete(data);
            this.crud.delAllLoading = false;
            if(data[0].modelType == '0'){
              this.$router.replace({
                path: "/factory/model",
              });
            } else {
              this.initTree();
            }
          }
        })
        .catch(() => {});
    },
    //详情刷新之后
    [CRUD.HOOK.afterRefresh]() {
      this.detailsData = this.crud.data.length > 0 ? this.crud.data[0] : defaultForm;
      return true;
    },
    //详情删除之后
    [CRUD.HOOK.afterDelete](crud, data) {
      var id = data[0].pid;
      this.getDetailsDataById(id);
      if(data[0].modelType != '0'){
        this.initTree();
      }
      return true;
    },
    //详情编辑之后
    [CRUD.HOOK.afterSubmit](crud, data) {
      this.initTree();
      return true;
    },
  },
  mounted: function () {
    const that = this;
    window.onresize = function temp() {
      that.height = document.documentElement.clientHeight - 180 + "px;";
    };
    //获取index页面传递过来的值
    this.getDetailsDataById(this.$route.params.id);
    //初始化树
    this.initTree();

  },
};
</script>
<style scoped>
.details-title {
  font-size: 18px;
  color: #333;
  font-weight: 700;
}
.row-con {
  display: flex;
  flex-flow: row wrap;
}
.row-con .card {
  height: 100%;
}
</style>
